<template>
    <div ref="chartDom" class="chart-container"></div>
</template>
  
  <script setup lang="ts">
  import { ref, onMounted, onUnmounted, shallowRef } from 'vue';
  import * as echarts from 'echarts/core';
  import type { EChartsOption } from 'echarts';
  import variables from '../../variables.less?raw';
  
  function getLessVariable(varName: string): string {
      const match = variables.match(new RegExp(`@${varName}:\\s*([^;]+);`));
      return match ? match[1].trim() : '#ccc';
  }
  
  const chartDom = ref<HTMLElement | null>(null);
  const myChart = shallowRef<echarts.ECharts | null>(null);
  

  const deptNames = [ 
      '党群监察部', '科技教育中心', '发展艺术中心', '视觉艺术中心',
      '校区管理部', '实践教育中心', '财务部', '人力资源部',
      '数字管理部', '办公室'
  ];
  const deptCostDataPercentages = [15.35, 15.35, 15.35, 15.35, 15.35, 15.35, 15.35, 15.35, 15.35, 15.35]; // From image
  const deptCostDataValues = [35, 35, 35, 35, 35, 35, 35, 35, 35, 35]; // From image (万)
  // --- End Data ---
  
  const axisLineColor = getLessVariable('axis-line-color');
  const textColor = getLessVariable('text-color');
  const primaryColor = getLessVariable('primary-color');
  const secondaryColor = getLessVariable('secondary-color');
  
  const option: EChartsOption = {
      tooltip: {
          trigger: 'axis', axisPointer: { type: 'shadow' },
          formatter: (params: any) => {
              const index = params[0].dataIndex;
              const name = deptNames[index];
              const value = deptCostDataValues[index] || 0;
              const percentage = deptCostDataPercentages[index] || 0;
              return `${name}<br/>${params[0].marker}成本: ${value}万 (${percentage}%)`;
          },
          backgroundColor: 'rgba(3, 28, 66, 0.9)', borderColor: axisLineColor, textStyle: { color: '#fff' }
      },
      grid: {
          left: '3%', right: '20%', bottom: '3%', top: '5%', containLabel: true
      },
      xAxis: {
          type: 'value', axisLabel: { show: false }, axisLine: { show: false },
          axisTick: { show: false }, splitLine: { show: false }
      },
      yAxis: {
          type: 'category', data: deptNames,
          axisLabel: {
              color: textColor, fontSize: 12,
              formatter: (value: string) => value.length > 6 ? value.slice(0, 5) + '...' : value
          },
          axisLine: { show: true, lineStyle: { color: axisLineColor } },
          axisTick: { show: false }, inverse: true
      },
      series: [{
          name: '成本占比', type: 'bar', barWidth: '50%',
          data: deptCostDataPercentages,
          itemStyle: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  { offset: 0, color: primaryColor },
                  { offset: 1, color: secondaryColor }
              ]),
              borderRadius: [0, 3, 3, 0]
          },
          label: {
              show: true, position: 'right', color: primaryColor, fontSize: 11,
              formatter: (params: any) => {
                  const value = deptCostDataValues[params.dataIndex] || 0;
                  // Use non-breaking space (\u00A0) for better alignment
                  return `${params.value}%\u00A0\u00A0\u00A0${value}万`;
              }
          }
      }]
  };
  
  const resizeChart = () => myChart.value?.resize();
  
  onMounted(() => {
    if (chartDom.value) {
      myChart.value = echarts.init(chartDom.value);
      myChart.value.setOption(option);
      window.addEventListener('resize', resizeChart);
    }
  });
  
  onUnmounted(() => {
    window.removeEventListener('resize', resizeChart);
    myChart.value?.dispose();
  });
  
  </script>
  
  <style lang="less" scoped>
  // .chart-container is defined globally or can be styled here if needed
  .chart-container {
    width: 100%;
    height: 100%; // Make sure it fills the panel content area
  }
  </style>